Documentation by “Designesia"

“Truehost v1.1.0”

Updated: 8 April, 2013
By: designesia
Email: designesia@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Also please don't forget to give rating! Thanks so much! :)

HTML Structure
1. Sample HTML Structure For Content
2. Basic Grid HTML
CSS
1. Quick enable/disable css files.
2. Use Boxed Layout
3. Change Theme Color
4. Use Backgoround Pattern/Image
JavaScript
1. Parallax Background
2. Lazyload Images (for smooth image loading)
Contact PHP

A) HTML structure - top

This template using Bootstrap framework. All the information within main content is nested within a div with id- name "content". If you need more information you can read Bootstrap documentation on this link

1) Sample HTML Structure For Content

<div id="content">
     <div class="container">
          <div class="row">
               <div class=col-md-4">
                    this is your content			
               </div>
               <div class=col-md-8">
                    this is your content
               </div>
          </div>
     </div>
</div>

2) Basic Grid HTML

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). Click here for more information.

<div class="row">
     <div class=col-md-4">...</div>
     <div class=col-md-8">...</div>
</div>

B) CSS - top

All files below can be found under folder Truehost/css.

main.css - used for load all css files
style.css - used for typography, element, etc
boxed.css - used for boxed layout
bootstrap.css - css by Twitter
prettyPhoto.css - used for image popup
responsiveslides.css - used for slider

1) Quick enable/disable css files.

To enable css file simply remove mark /* and */ between line of css file. See sample below:

Before disabled:

@import url("boxed.css");

After disabled:

/* @import url("boxed.css"); */

2) Use Boxed Layout

Open file main.css > Activate boxed.css by removing /* and */ between boxed.css line. Or simply copy code below:

@import url("boxed.css");

Disable wide-screen.css by adding /* and */ between wide-screen.css line.

/* @import url("wide-screen.css"); */

3) Change Theme Color

Open file main.css > find code below:

@import url("colors/green.css");

Change green.css with one of below:

aqua.css
blue.css
green.css
grey.css
red.css
orange.css
pink.css
purple.css
yellow.css

4) Use Backgoround Pattern/Image

Activate boxed layout first > Open file boxed.css > Find code below then change background value.

body{
background:url(../images/bg-pattern/p1.png);
}

This theme included 20 pattern. You can simply change p1 with p1 - p20 for different pattern background.

D) Javascript - top

jquery.min.js - http://docs.jquery.com/Downloading_jQuery
responsiveslides.min.js - used for create slider
Url: http://responsiveslides.com
jquery.isotope.min.js - used in gallery page
Url: http://isotope.metafizzy.co/
jquery.prettyPhoto.js - used to open popup image
Url: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
easing.js - http://archive.plugins.jquery.com/project/Easing
jquery.ui.totop.js - used to scroll to top
Url: http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
jquery.lazyload.js - used to load image smoothly
Url: http://www.appelsiini.net/projects/lazyload

1) Create parallax backrgound

Create a section tags then give it an id name.

<section id="my-section">...content here...</section>

Add data-speed attribute (1-10).

<section id="my-section" data-speed="10">...content here...</section>

Add data-type attribute below.

 <section id="my-section" data-speed="10" data-type="background">...content here...</section>

Open style.css file, set background image for your section.
```
#my-section{
     background-image:my-bg-image.jpg;
}
```
Done.

2) Create lazyload image (for smooth image loading)

Create image tags then set src value to a temporary image path
```
<img src="blank.gif"></img>
```

Create data-original attribute, set value to real image path.

<img src="preload-pic.gif" data-original="my-pic.jpg"></img>

Done.

C) Contact Page- top

Open > Send.php. Change $email_to value with your email..

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

designesia

Go To Table of Contents